<template>
	<view class="">
		<u-sticky>
			<view class="flex justify-between align-center bg-white">
				<view class="data-panel">
					<view class="flex justify-between align-center">
						<view class="flex">
							<view 
								class="tabs-item" 
								:class="dateIndex===ix?'bg-red':''"
								v-for="(im, ix) in dateTabs" 
								:key="im.value"
								@click="onDate(im,ix)"
							>
							<text>{{im.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="pr-20">
					<uni-icons custom-prefix="iconfont" type="icon-jiajian" size="32" @click="showxg=true" color="#e54d42"></uni-icons>
				</view>
			</view>
		</u-sticky>
		<view class="mt-20 pl-20 pr-20 bg-white" v-if="marginList.length > 0">
			<view class="pt-20 pb-20 border-b" v-for="(item, index) in marginList" :key="index">
				<view class="flex justify-between align-center">
					<text class="fsize-32">{{item.explain}}</text>
					<text class="fsize-34" :class="item.direction===1?'line-yellow':''">{{item.amount}}</text>
				</view>
				<view class="mt-10 fsize-26">{{item.orderId}}</view>
				<view class="mt-10 fsize-24 line-gray">{{item.orderDate}}</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
		<u-popup :show="showxg" @close="onCloseForm">
			<view class="pt-20">
				<u--form errorType="toast" :model="formData" ref="myForm" :rules="rules" labelWidth="80">
					<u-form-item label="操作类型:" prop="direction" borderBottom>
						<u-radio-group v-model="formData.direction">
							<u-radio shape="circle" label="增加" :name="1" activeColor="#e54d42"></u-radio>
							<u-radio shape="circle" label="扣除" :name="-1" activeColor="#e54d42"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="操作金额:" prop="amount" borderBottom>
						<u-input v-model="formData.amount" border="none" type="digit" placeholder="请输入操作金额" />
					</u-form-item>
					<u-form-item label="备注信息:" prop="explain" borderBottom>
						<u-input v-model="formData.explain" placeholder="请输入备注信息" border="none" />
					</u-form-item>
				</u--form>
				<view class="pl-30 pr-30 mt-40">
					<u-button color="#e54d42" text="确认" @click="submit" size="large"/>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import setDate from '@/common/date.js';
	export default {
		data(){
			return {
				formData: {
					storeId: null,
					direction: 1,
					amount: null,
					explain: '',
					orderId: '',
				},
				showxg: false,
				showCalendar: false,
				dateIndex: 0,
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				
				dateTabs:[
					{name:'今天',value: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`},
					{name:'昨日',value: `${setDate.getDate(-1)} 到 ${setDate.getDate(0)}`},
					{name:'近七日',value:`${setDate.getDate(-7)} 到 ${setDate.getDate(0)}`},
					{name:'本月',value:`${setDate.getCurrentMonth().startDate} 到 ${setDate.getCurrentMonth().endDate}`},
					{name:'自定义',value:999}
				],
				marginList: [],
				searchData: {
					page: 1,
					storeId: null,
					limit: 20,
					createTime: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`
				},
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				rules: {
					amount: [{
						required: true,
						message: '请输入操作金额',
						trigger: ['blur', 'change']
					}],
					remark: [{
						required: true,
						message: '请输入备注信息',
						trigger: ['blur', 'change']
					}],
				}
			}
		},
		onLoad(opt) {
			this.formData.storeId = opt.id
			this.searchData.storeId = opt.id
			this.getPageList()
		},
		onReady() {
			this.$refs.myForm.setRules(this.rules)
		},
		onReachBottom(){
			this.scrolltolower()
		},
		methods: {
			onCloseForm(){
				this.showxg = false
				this.formData.direction = 1
				this.formData.amount = null
				this.formData.explain = ''
			},
			onDate(row,index){
				if(this.dateIndex === index && this.dateIndex!==4) return
				this.dateIndex = index
				if(index === 4){
					this.showCalendar = true
				}else {
					this.dateTabs[4].name = '自定义'
					this.searchData.createTime = row.value
					this.searchData.page = 1
					this.marginList = []
					this.getPageList()
				}
			},
			confirmDate(dates){
				this.sdate = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
				this.dateTabs[4].name = this.sdate
				this.searchData.createTime = `${dates[0]} 到 ${dates[dates.length-1]}`
				this.searchData.page = 1
				this.marginList = []
				this.getPageList()
				this.showCalendar = false
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList()
				}
			},
			getPageList(){
				this.$reqPost('FinanceStoreGetPageList', this.searchData).then(res=>{
					this.marginList = [...this.marginList, ...res.data]
					if (res.count > this.marginList.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			submit() {
				const that = this
				this.$refs.myForm.validate().then(res => {
					that.$reqJsonPost('FinanceStoreDoCreate', that.formData).then(res=>{
						that.$refs.uToast.show({
							message:res.msg,
							complete(){
								that.searchData.page = 1
								that.marginList = []
								that.getPageList()
								that.showxg = false
								uni.$emit('upMarginList', true)
							}
						})
					})
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.data-panel{
		padding:10px;
		font-size: 14px;
		background-color: #fff;
		.tabs-item{
			padding:4px 6px;
			border-radius:2px;
		}
	}
</style>